﻿@using KnockoutJS.Web.Extensions
@model KnockoutJS.Web.ViewModels.CartViewModel
@{
    ViewData["Title"] = "购物车详情";
}

<h2>@ViewData["Title"]</h2>

<div id="cartDetails">
    <table class="table table-bordered table-hover table-striped" style="display:none" data-bind="visible:cart.cartItems().length>0">
        <tr>
            <th>Book</th>
            <th>Unit Price</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>&nbsp;</th>
        </tr>
        <!-- ko foreach:{data:cart.cartItems,beforeRemove:fadeOut}-->
        <tr>
            <td><a href="@Url.Action("Details","Book")" data-bind="appendToHref:book.id,text:book.title"></a></td>
            <td data-bind="text:'$'+book.salePrice"></td>
            <td data-bind="text:quantity"></td>
            <td data-bind="text:'$'+quantity.subTotal()"></td>
            <td>
                <button type="button" class="btn btn-danger" data-bind="click:$parent.deleteCartItem,visible:!$parent.sending()">移除</button>
            </td>
        </tr>
        <!-- /ko -->
    </table>

    <div class="progress" data-bind="visible:sending">
        <div class="progress-bar progress-bar-info progress-bar-striped active"
             role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%;">
            <span class="sr-only"></span>
        </div>
    </div>
    <div class="alert alert-warning" style="display:none" data-bind="visible:cart.cartItems().length == 0">
        购物车为空！<a href="@Url.Action("BookShop","Home")">继续购物</a>
    </div>
    <h3>总计:$<span data-bind="text:cart.total"></span></h3>
</div>

@section Scripts{
    <script src="~/js/ViewModels/CartDetailViewModel.js"></script>
    <script type="text/javascript">
        var model = @Html.HtmlConvertToJson(Model);
        var cartDetailViewModel = new CartDetailViewModel(model);
        ko.applyBindings(cartDetailViewModel, document.getElementById("cartDetails"));
    </script>
}